<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">	
<f:view contentType="text/html">
<h:head>
<script type="text/javascript">
  $(function() {

    $('#navigation a').stop().animate({'marginLeft':'75px'},3000);

    $('#navigation > li').hover(
      function () {
       $('a',$(this)).stop().animate({'marginLeft':'2px'},200);
      },

      function () {
       $('a',$(this)).stop().animate({'marginLeft':'75px'},200);

      }
    );

  });
</script>
<style type="text/css">

ul#navigation {
  position: fixed;
  margin: 0px;
  padding: 0px;
  top: 160px;
  right:0px;
  list-style: none;
  z-index:90;
}

ul#navigation li {
  width: 104px;
  margin-bottom:2px;
}

ul#navigation li a {
  display: block;
  /*margin-left: -2px;*/
  margin-right: -2px;
  width: 104px;
  height: 70px;
  -moz-border-radius:10px 0px 0px 10px;
}

</style>
</h:head>
<h:body>
<h:form>
<ul id="navigation">
 <li class="imagen1">
  <a class="redondeado-popurri" href="#{request.contextPath}" title="Ir al Inicio">
   <img src="#{request.contextPath}/resources/images/principal/lateral_home.png" border="0" /> 
  </a>
 </li>
</ul>
</h:form>
</h:body>
</f:view>
</html>